<template>
  <div class="yuJing">
    <div class="yjHeader">
      <label for="">监测名称</label>
      <input type="text">

      <label for="">状态</label>
      <select>
        <option selected>请选择</option>
        <option>一级预警</option>
        <option>二级预警</option>
        <option>三级预警</option>
        <option>异常</option>
      </select>

      <label for="">是否处理</label>
      <select>
        <option selected>未处理</option>
        <option>已处理</option>
      </select>

      <button class="yjbtn1">查询</button>
      <button class="yjbtn2">重置</button>
      <button class="yjbtn3">+新增信息通知人员</button>
    </div>
    <div class="yjcdtb">
      <div class="yjmain">
        <div class="yjtbT">
          <button class="yjtbtbtn">批量处理</button>
          <div class="yjtbt">
            <div class="yjtbt1"></div>
            <div class="yjtbt1"></div>
            <div class="yjtbt1"></div>
            <div class="yjtbt1"></div>
          </div>
        </div>
        <div class="table">
          <div class="thead">
            <div class="tr">
              <div class="th"><input type="checkbox" class="checkbox"></div>
              <div class="th">编号</div>
              <div class="th">监测点名称（mm）</div>
              <div class="th">数值</div>
              <div class="th">状态</div>
              <div class="th">时间</div>
              <div class="th">是否处理</div>
              <div class="th">原因</div>
              <div class="th">操作</div>
            </div>
          </div>
          <div class="tbody" v-if="list.length > 0">
            <div v-for="(item) in list" :key="item.id" class="tr" :class="{ active: item.isChecked }">
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
              <div class="td"></div>
            </div>
          </div>
          <div class="yjempty" v-else>
            <div class="yjempty-">无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  }
}
</script>
<style scoped>
 .yuJing {
   top: 8.3vh;
   position: absolute;
   width: 100vw;
   height: 91.5vh;
   z-index: 100;
   background: url(/img/jiemian/bg.jpg);
   background-repeat: no-repeat;
   background-position: 0 -8.3vh;
   opacity: 0.9;
   font-size: 0.8vw;
   color: black;
 }

 .yjHeader {
   display: flex;
   align-items: center;
   position: absolute;
   margin: 0.52vw;
   z-index: 1000;
   width: 98.958vw;
   height: 8.25vh;
 }

 label {
   margin-left: 2.5vh;
   width: 5.73vw;
   height: 4.02vh;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding-right: 0.78vw;
   font-size: 0.8vw;
 }

 .yjbtn1 {
   margin-left: 1.6vw;
   width: 3.2vw;
   height: 3.6vh;
   padding: 0 0.52vw;
   border-radius: 0.3vw;
   font-size: 0.7vw;
 }

 .yjbtn2 {
   margin-left: 0.8vw;
   width: 3.2vw;
   height: 3.6vh;
   padding: 0 0.52vw;
   border-radius: 0.3vw;
   font-size: 0.7vw;
 }

 .yjbtn3 {
   margin-left: 26vw;
   width: 10vw;
   height: 3.6vh;
   padding: 0 0.52vw;
   border-radius: 0.3vw;
   font-size: 0.7vw;
 }

 .yjcdtb {
   margin-top: 10.33vh;
   margin-left: 1vw;
   margin-right: 1vw;
   width: 98vw;
   height: 83.25vh;
 }

 .yjtbT {
   display: flex;
   align-items: center;
   width: 100%;
   height: 5.3vh;
 }

 .yjtbtbtn {
   margin-left: 2.8vw;
   width: 4.5vw;
   height: 3.6vh;
   padding: 0 0.52vw;
   border-radius: 0.3vw;
   font-size: 0.7vw;
 }

 .yjtbt {
   display: flex;
   width: 8.4vw;
   height: 3.32vh;
   margin-left: 80.7vw;
 }

 .yjtbt1 {
   width: 1.634vw;
   height: 3.32vh;
   background-color: #e90de9;
   margin-left: 0.466vw;
 }

 .table {
   border-width: 1px;
   border-style: solid;
   border-color: #FFFFFF;
 }

 .th {
   width: 10vw;
   text-align: center;
   height: 3.6vh;
   margin: 0.53vh 0;
   color: #FFFFFF;
   font-size: 0.8vw;
 }

 .td {
   width: 10vw;
   text-align: center;
   height: 3.6vh;
   margin: 0.53vh 0;
   color: #FFFFFF;
   font-size: 0.8vw;
 }

 .tr {
   display: flex;
 }

 .yjempty {
   width: 100%;
   height: 25vh;
 }

 .yjempty- {
   margin-top: 12.5vh;
   color: #999999;
   text-align: center;
 }

 .checkbox {
   width: 0.9375vw;
   height: 1.9vh;
 }
</style>
